<template>
  <view class="feedback-page" :style="my_style">
    <view class="bg-white u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-m-b-20">
      <view class="border-bottom1 u-p-b-20 u-m-b-20">
        <textarea
          auto-height
          :value="content"
          placeholder="请描述您的问题或建议，我们会认真听取和处理～"
          maxlength="500"
          @input="descInput"
        />
        <view class="u-text-left light-color">{{ length }}/500</view>
      </view>
      <upload-pic
        @confirm="
          (val) => {
            imgs = val.toString()
          }
        "
      />
    </view>

    <view class="footer">
      <view
        @click="$u.debounce(feedback, 2000, true)"
        class="footer-primary-btn flex-center u-m-b-12"
        >提交</view
      >
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: '',
        length: 0,
        imgs: '',
      }
    },
    onLoad(options) {},
    methods: {
      descInput(e) {
        if (e.detail.value.length > 500) {
          return
        }
        this.length = e.detail.value.length
        this.content = e.detail.value
      },
      /**
       * 	意见反馈
       */
      async feedback() {
        if (!this.content) {
          this.$u.toast('请填写您遇到的问题')
          return
        }
        const res = await this.$api.common.system('feedback', {
          content: this.content,
          imgs: this.imgs,
        })
        if (res.code === 200) {
          this.successBack('反馈成功!')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .feedback-page {
    &-top {
      width: 100%;
      padding: 26rpx 24rpx;
      color: #fff;
      background: var(--color);
    }

    textarea {
      width: 100%;
      min-height: 300rpx;
      background: #fff;
    }

    .footer {
      padding: 40rpx 24rpx;
    }
  }
</style>
